<template>
	<view class="container" :style="{ height: height }">
		<editor class="ql-container" :placeholder="placeholder" :show-img-size="true" :show-img-toolbar="true"
			:show-img-resize="true" @ready="onEditorReady" id="editor" @statuschange="statuschange" @focus="editFocus"
			@blur="editBlur" ref="editot"></editor>
		<!-- 操作工具 -->
		<view class="tool-view">
			<view class="mask" v-if="showMoreEmjor" @click="showMoreEmjor = false">

			</view>
			<!-- <view class="font-more" :style="{ height: showMoreEmjor ? 'auto' : 0 }" >
				<evan-emoji height="330rpx" @on-select="fnOnEmojiSelect" @on-delete="undo"></evan-emoji>
			</view> -->

			<!-- 文字相关操作 -->
			<view class="font-more" :style="{ height: showMoreTool ? '100rpx' : 0 }">
				<jinIcon class="single" type="&#xe60e;" font-size="44rpx" title="加粗" @click="setBold"
					:color="showBold ? activeColor : '#666666'"></jinIcon>
				<jinIcon class="single" type="&#xec85;" font-size="44rpx" title="斜体" @click="setItalic"
					:color="showItalic ? activeColor : '#666666'"></jinIcon>
				<jinIcon class="single" type="&#xe6ec;" font-size="44rpx" title="分割线" @click="setIns"
					:color="showIns ? activeColor : '#666666'"></jinIcon>
				<jinIcon class="single" type="&#xe6e2;" font-size="44rpx" title="标题" @click="setHeader"
					:color="showHeader ? activeColor : '#666666'"></jinIcon>
				<jinIcon class="single" type="&#xe6e7;" font-size="44rpx" title="居中" @click="setCenter"
					:color="showCenter ? activeColor : '#666666'"></jinIcon>
				<jinIcon class="single" type="&#xe6e6;" font-size="44rpx" title="居右" @click="setRight"
					:color="showRight ? activeColor : '#666666'"></jinIcon>
			</view>

			<view class="tool">
				<jinIcon class="single" type="&#xe8bb;" font-size="44rpx" title="插入图片" @click="insertImage"></jinIcon>
				<!-- <jinIcon class="single" type="&#xe682;" font-size="44rpx" title="表情"  @click="showEmjor" :color="showMoreEmjor ? activeColor : '#666666'"></jinIcon> -->
				<jinIcon class="single" type="&#xe734;" font-size="44rpx" title="修改文字样式" @click="showMore"
					:color="showMoreTool ? activeColor : '#666666'"></jinIcon>
				<jinIcon class="single" type="&#xe6e5;" font-size="44rpx" title="分割线" @click="insertDivider"></jinIcon>
				<jinIcon class="single" type="&#xe608;" font-size="44rpx" title="撤销" @click="undo"></jinIcon>
				<jinIcon class="single" type="&#xe60b;" font-size="44rpx" title="重做" @click="redo"></jinIcon>
			</view>
		</view>
		<w-compress ref='wCompress' />
	</view>
</template>

<script>
	import minxins from '../../common/upload.js';
	import jinIcon from './jin-icons.vue';
	import WCompress from '@/components/w-compress/w-compress.vue'

	export default {
		mixins: [minxins],
		props: {
			// 点击图片时显示图片大小控件
			showImgSize: {
				type: Boolean,
				default: false
			},
			// 点击图片时显示工具栏控件
			showImgToolbar: {
				type: Boolean,
				default: false
			},
			// 点击图片时显示修改尺寸控件
			showImgResize: {
				type: Boolean,
				default: false
			},
			// 占位符
			placeholder: {
				type: String,
				default: '开始输入...'
			},

			// 上传文件时的name
			fileKeyName: {
				type: String,
				default: 'file'
			},
			// 上传图片时，http请求的header
			header: {
				type: Object
			},
			// 初始化html
			html: {
				type: String
			},
			// 整个控件的高度
			height: {
				type: String,
				default: '100vh'
			}
		},
		computed: {},
		data() {
			return {
				showMoreTool: false,
				showMoreEmjor: false,
				showBold: false,
				showItalic: false,
				showIns: false,
				showHeader: false,
				showCenter: false,
				showRight: false,
				activeColor: '#F56C6C',

				selectEmoji: {},
				imageNum: 0
			};
		},
		components: {
			jinIcon,
			WCompress
		},
		mounted() {},
		methods: {
			onEditorReady(e) {
				uni.createSelectorQuery()
					.in(this)
					.select('.ql-container')
					.fields({
							size: true,
							context: true
						},
						res => {
							this.editorCtx = res.context;
							this.editorCtx.setContents({
								html: this.html
							});
						}
					)
					.exec();
			},
			undo() {
				this.editorCtx.undo();
			},

			// 监听选中
			fnOnEmojiSelect(e) {
				let url = e.data.url

				this.editorCtx.insertImage({
					src: url, // 此处需要将图片地址切换成服务器返回的真实图片地址
					width: '25px',
					height: '25px',
					alt: '表情',
					success: function(e) {}
				});
			},
			// 插入图片
			insertImage() {
				if (this.imageNum == 8) {
					return this.$Show.show('不能再上传图片了。')
				}
				let familyId = uni.getStorageSync('familyId') ? uni.getStorageSync('familyId')[0] : ''
				uni.chooseImage({
					count: 9,
					success: res => {
						// #ifdef MP-WEIXIN

						this.$refs.wCompress.start(res.tempFilePaths).then(res2 => {
							res2.forEach((item, index) => {
								var fileName = Date.now() + '_' + Math.round(Math.random() *
									100000000) + '.' + item.substring(item.lastIndexOf(
									'.') + 1)

								var maxImageMegBytes = uni.getStorageSync('maxImageMegBytes') ?
									uni.getStorageSync('maxImageMegBytes') : 20

								var resSize = res.tempFiles[index].size;
								if (resSize > maxImageMegBytes * 1024 * 1024) {
									uni.showToast({
										title: `大小不能超过${maxImageMegBytes}MB`,
										icon: 'none'
									});
									return
								}

								var familyId = uni.getStorageSync('familyId') ? uni
									.getStorageSync('familyId')[0] : ''

								// this.uploadUserImage(item, 'image', fileName, familyId, (
								// 	imgUrl) => {
								// 	this.form.images.push(imgUrl);
								// })
								
								this.uploadUserImage(item, 'image', fileName, familyId, (
									imgUrl) => {
									this.$emit('uploadImg', imgUrl)
									this.imageNum++
									this.editorCtx.insertImage({
										src: imgUrl, // 此处需要将图片地址切换成服务器返回的真实图片地址
										alt: '图片',
										success: function(e) {}
									});
								})
							})
						})
						// #endif
						
						// #ifndef MP-WEIXIN
						for (let i = 0; i < res.tempFiles.length; i++) {
							let item = res.tempFiles[i]
						
							// #ifdef APP-PLUS
							let houzui = item.path.substring(item.path.lastIndexOf('.') + 1)
							// #endif
						
							// #ifdef H5
							let houzui = item.name.substring(item.name.lastIndexOf('.') + 1)
							// #endif
						
							let name = Date.now() + '_' + Math.round(Math.random() * 100000000)
							let path = item.path
							let fileName = name + '.' + houzui
						
							let maxImageMegBytes = uni.getStorageSync('maxImageMegBytes') ? uni.getStorageSync(
								'maxImageMegBytes') : 20
						
							let resSize = item.size;
							if (resSize > maxImageMegBytes * 1024 * 1024) {
								uni.showToast({
									title: `大小不能超过${maxImageMegBytes}MB`,
									icon: 'none'
								});
								return
							}
						
						
							let familyId = uni.getStorageSync('familyId') ? uni.getStorageSync('familyId')[0] :
								''
						
						
							// #ifdef APP-PLUS
							uni.compressImage({
								src: path,
								quality: 30,
								compressedWidth: 300,
								success: res => {
									this.uploadUserImage(res.tempFilePath, 'image', fileName,
										familyId, (
											imgUrl) => {
											this.$emit('uploadImg', imgUrl)
											this.imageNum++
											this.editorCtx.insertImage({
												src: imgUrl, // 此处需要将图片地址切换成服务器返回的真实图片地址
												alt: '图片',
												success: function(e) {}
											});
										})
								}
							})
							// #endif
							// #ifdef H5
							//压缩图片
							this.getImageInfo(path).then(fileUrl => {
								this.uploadUserImage(fileUrl, 'image', fileName, familyId, (
									imgUrl) => {
									this.$emit('uploadImg', imgUrl)
									this.imageNum++
									this.editorCtx.insertImage({
										src: imgUrl, // 此处需要将图片地址切换成服务器返回的真实图片地址
										alt: '图片',
										success: function(e) {}
									});
								})
							})
							// #endif
						
						
						}
						// #endif
						
					}
				})
			},
			/// 插入分割线
			insertDivider() {
				this.editorCtx.insertDivider();
			},
			redo() {
				this.editorCtx.redo();
			},
			showMore() {
				this.showMoreTool = !this.showMoreTool;
				this.showMoreEmjor = false
				this.editorCtx.setContents();
			},
			showEmjor() {
				this.showMoreEmjor = !this.showMoreEmjor;
				this.showMoreTool = false
			},
			setBold() {
				this.showBold = !this.showBold;
				this.editorCtx.format('bold');
			},
			setItalic() {
				this.showItalic = !this.showItalic;
				this.editorCtx.format('italic');
			},
			checkStatus(name, detail, obj) {
				if (detail.hasOwnProperty(name)) {
					this[obj] = true;
				} else {
					this[obj] = false;
				}
			},
			statuschange(e) {
				var detail = e.detail;
				this.checkStatus('bold', detail, 'showBold');
				this.checkStatus('italic', detail, 'showItalic');
				this.checkStatus('ins', detail, 'showIns');
				this.checkStatus('header', detail, 'showHeader');
				if (detail.hasOwnProperty('align')) {
					if (detail.align == 'center') {
						this.showCenter = true;
						this.showRight = false;
					} else if (detail.align == 'right') {
						this.showCenter = false;
						this.showRight = true;
					} else {
						this.showCenter = false;
						this.showRight = false;
					}
				} else {
					this.showCenter = false;
					this.showRight = false;
				}
			},
			setIns() {
				this.showIns = !this.showIns;
				this.editorCtx.format('ins');
			},
			setHeader() {
				this.showHeader = !this.showHeader;
				this.editorCtx.format('header', this.showHeader ? 'H2' : false);
			},
			setCenter() {
				this.showCenter = !this.showCenter;
				this.editorCtx.format('align', this.showCenter ? 'center' : false);
			},
			setRight() {
				this.showRight = !this.showRight;
				this.editorCtx.format('align', this.showRight ? 'right' : false);
			},

			async editFocus(e) {},
			editBlur(e) {},
			release() {
				this.editorCtx.getContents({
					success: res => {
						this.$emit('editOk', res);
					}
				});
			}
		}
	};
</script>

<style scoped>
	.container {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		height: 100%;
		box-sizing: border-box;
		width: 100%;
		/* padding-top: 30rpx; */
	}

	.mask {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		top: 0;
		z-index: 10;
	}

	.ql-container {
		line-height: 150%;
		font-size: 32rpx;
		width: 100%;
		background: #fff;
		width: 100%;
		margin: 0 auto;
		flex: 1;
		box-sizing: border-box;
		margin-top: 30rpx;
		box-sizing: border-box;
		/* padding-bottom: 5rpx; */
	}

	.tool-view {
		width: 60%;
		background: #eee;
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		/* margin-top: 20px; */
	}

	.tool {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100%;
	}

	.font-more {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100%;
		background: rgb(235, 235, 235);
		overflow: hidden;
		transition: all 0.15s;
		position: relative;
		z-index: 100;
	}

	.setting-layer {
		position: absolute;
		bottom: 100rpx;
		background: #fff;
		width: 250rpx;
		right: 20rpx;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		border-radius: 8rpx;
	}

	.setting-layer .single {
		height: 80rpx;
		font-size: 32rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		line-height: 80rpx;
		flex-direction: row;
		color: #666;
	}

	.setting-layer .single .icon {
		margin-right: 20rpx;
	}

	.setting-layer-mask {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: transparent;
	}
</style>